<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">库存管理</h2>
        <span class="layui-breadcrumb pull-right"> <a href="#!home_console">首页</a> <a><cite>库存管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-fluid layadmin-cmdlist-fluid">
            <div class="layui-row layui-col-space30">
                <% for(s in stocks) { %>
                <div class="layui-col-md2 layui-col-sm4">
                    <div class="cmdlist-container">
                        <a href="javascript:;"> <img src="${s.product.productPic}">
                        </a>
                        <div class="cmdlist-text">
                            <p class="info">${s.product.productName}</p>
                            <div class="price">
                                <b>库存： ${s.productAmount}件 </b>
                            </div>
                            <div class="price">
                                <span> <b style="margin-right: 2px;">预警：
                                        低于${s.warningNum}件 </b>
                                    <% if(warning) { %>
                                    <button product="${s.product.id}" parm="${s.warningNum}" data="${s.id}" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-xs warning">设置</button>
                                    <% } %>
                                </span>
                            </div>
                            <div class="price" product="${s.product.id}" data="${s.id}" name="${s.product.productName}">
                                <% if(stockRecord) { %>
                                <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm layui-btn-normal stockRecord" style="margin-top: 10px;">库存明细</button>
                                <% } %>
                                <% if(addStock) { %>
                                <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm layui-btn-normal addStock" style="margin: 10px 0;">增加库存数量</button>
                                <% } %>
                                <% if(reduceStock) { %>
                                <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm layui-btn-normal reduceStock" style="margin: 0;">减少库存数量</button>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </div>
                <% } %>
            </div>
        </div>
        <link rel="stylesheet" href="${ctxPath }/assets/css/template.css" />
        <script>
        layui
            .use(
                ['element', 'admin', 'laypage', 'layer', 'util','table','form'],
                function() {
                    var element = layui.element,
                        $ = layui.$,
                        admin = layui.admin,
                        laypage = layui.laypage,
                        layer = layui.layer,
                        table = layui.table,
                        form = layui.form,
                        util = layui.util;
                    // 搜索按钮点击事件
                    $('.warning')
                        .click(
                            function() {
                                var oldNum = $(this).attr(
                                    "parm");
                                var stockId = $(this).attr(
                                    "data");
                                var productId = $(this)
                                    .attr("product");

                                layer
                                    .prompt({
                                            formType: 0,
                                            value: oldNum,
                                            title: '请输入触发预警的产品数量',
                                            area: [
                                                '800px',
                                                '350px'
                                            ]
                                            //自定义文本域宽高
                                        },
                                        function(
                                            value,
                                            index,
                                            elem) {
                                            if (isNaN(value)) {
                                                layer
                                                    .msg(
                                                        "请输入数字！", {
                                                            icon: 1,
                                                            time: 500
                                                        })
                                                return;
                                            }
                                            layer
                                                .load(2);
                                            var parm = {
                                                id: stockId,
                                                warningNum: value,
                                                productId: productId
                                            };
                                            admin
                                                .req(
                                                    "service/stock/warning",
                                                    parm,
                                                    function(
                                                        data) {
                                                        layer
                                                            .closeAll('loading');
                                                        if (data.code == 1) {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 1
                                                                    });
                                                        } else {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 2
                                                                    });
                                                        }
                                                        location
                                                            .reload();
                                                    },
                                                    "post");

                                        });
                            });

                    $('.addStock')
                        .click(
                            function() {
                                var stockId = $(this)
                                    .parent().attr(
                                        "data");
                                var productId = $(this)
                                    .parent().attr(
                                        "product");
                                layer
                                    .prompt({
                                            formType: 0,
                                            value: 0,
                                            title: '增加库存数量',
                                            area: [
                                                '800px',
                                                '350px'
                                            ]
                                            //自定义文本域宽高
                                        },
                                        function(
                                            value,
                                            index,
                                            elem) {
                                            if (isNaN(value)) {
                                                layer
                                                    .msg(
                                                        "请输入数字！", {
                                                            icon: 1,
                                                            time: 500
                                                        })
                                                return;
                                            }
                                            layer
                                                .load(2);
                                            var parm = {
                                                id: stockId,
                                                purchaseNum: value,
                                                method: 1,
                                                productId: productId
                                            };
                                            admin
                                                .req(
                                                    "service/stock/purchase",
                                                    parm,
                                                    function(
                                                        data) {
                                                        layer
                                                            .closeAll('loading');
                                                        if (data.code == 1) {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 1,
                                                                        time: 1000
                                                                    },
                                                                    function() {
                                                                        location
                                                                            .reload();
                                                                    })
                                                        } else {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 2,
                                                                        time: 1000
                                                                    },
                                                                    function() {
                                                                        location
                                                                            .reload();
                                                                    })
                                                        }

                                                    },
                                                    "post");

                                        });
                            })

                    $('.reduceStock')
                        .click(
                            function() {
                                var stockId = $(this)
                                    .parent().attr(
                                        "data");
                                var productId = $(this)
                                    .parent().attr(
                                        "product");
                                layer
                                    .prompt({
                                            formType: 0,
                                            value: 0,
                                            title: '减少库存数量',
                                            area: [
                                                '800px',
                                                '350px'
                                            ]
                                            //自定义文本域宽高
                                        },
                                        function(
                                            value,
                                            index,
                                            elem) {
                                            if (isNaN(value)) {
                                                layer
                                                    .msg(
                                                        "请输入数字！", {
                                                            icon: 1,
                                                            time: 500
                                                        })
                                                return;
                                            }
                                            layer
                                                .load(2);
                                            var parm = {
                                                id: stockId,
                                                purchaseNum: value,
                                                method: 2,
                                                productId: productId
                                            };
                                            admin
                                                .req(
                                                    "service/stock/purchase",
                                                    parm,
                                                    function(
                                                        data) {
                                                        layer
                                                            .closeAll('loading');
                                                        if (data.code == 1) {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 1,
                                                                        time: 1000
                                                                    },
                                                                    function() {
                                                                        location
                                                                            .reload();
                                                                    })
                                                        } else {
                                                            layer
                                                                .msg(
                                                                    data.msg, {
                                                                        icon: 2,
                                                                        time: 1000
                                                                    },
                                                                    function() {
                                                                        location
                                                                            .reload();
                                                                    })
                                                        }

                                                    },
                                                    "post");

                                        });
                            })
                    $('.stockRecord').click(
                        function() {
                            var stockId = $(this).parent()
                                .attr("data");
                            var name = $(this).parent().attr(
                                "name");
                            showDetailModel(stockId, name);
                        })

/*                     // 显示表单弹窗
                    var showDetailModel = function(data, name) {
                        admin.popupCenter({
                            area: '50%',
                            title: "库存详情--" + name,
                            path: "service/stock/stockRecord?id=" +
                                data,
                            data: {
                                id: data
                            },
                            finish: function() {
                                location.reload();
                            }
                        });
                    }; */
                    
                    // 显示表单弹窗
                    var showDetailModel = function(data, name) {
            	layer.open({
                    type : 1,
                    area: '50%',
                	offset: '5%',
                    title : name+"--库存记录",
                    maxmin : true,
                    btn : [ '关闭' ],
                    content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
                    +'<script type="text/html" id="typeTpl">'
                    +'{{# if (d.type=== 1) { }}  '
                    +'<span style="color: red;">+  {{d.amount}}</span> '  
                		+'{{# } else if(d.type=== 2 ||d.type=== 3 || d.type=== 4) { }}  '
                		+'<span style="color: green;">-  {{d.amount}}</span>    '
                		+' {{# } }} <\/script>'
                		+' <script type="text/html" id="recordTypeTpl">'
                		+'{{# if (d.type=== 1) { }}  '
                		+'	<span style="color: red;">入库</span>   '
                		+'{{# } else if(d.type=== 2 ) { }}  '
                		+'	<span style="color: green;">出库</span>    '
                		+'{{# } else if(d.type=== 3 ) { }}  '
                		+'<span style="color: green;">售出</span>    '
                		+'{{# } else if(d.type=== 4 ) { }}  '
                		+'<span style="color: green;">领用</span>    '
                		+' {{# } }} <\/script>',
                   
                    success : function(index, layero) {
                    	
                          table.render({
                            elem: '#templateTable'
                            ,url: '/service/stock/stockRecord'
                            ,where:{type : data}
                            ,page: true //开启分页
                            ,cols: [[
                                {type: 'numbers', title: '序号'},
                                {field: 'shopName', sort: false, title: '门店名称'},
                                {field: 'amount', sort: false, title: '数量(件)',templet: '#typeTpl'},
                                {field: 'type', sort: false, title: '类型', templet: '#recordTypeTpl'},
                                {
                                    sort: true, templet: function (d) {
                                        return util.toDateString(d.createTime);
                                    }, title: '创建时间'
                                },
                            ]]
                          });
                        
                    },
                    });
                    };

                });
        </script>